<template>
	<div>
		<div class="box">
			<div class="one">
				<el-card>
					<div class="one_box">
						<div class="qm">
							<div>
								<p>OAO</p>
								累计收益：
								<el-select v-model="value" style="width: 80px" size="small">
									<el-option label="节电" value="节电" />
									<el-option label="节费" value="节费" />
									<el-option label="减碳" value="减碳" />
								</el-select>
							</div>
							<div><span class="num">26,000</span> RMB</div>
						</div>
						<div class="wn">
							<div>
								相比目标：
								<el-select v-model="value1" style="width: 80px" size="small">
									<el-option label="节电" value="节电" />
									<el-option label="节费" value="节费" />
									<el-option label="减碳" value="减碳" />
								</el-select>
							</div>
							<div>
								<p>超过/不足</p><span class="num">30,000</span> kWh
							</div>
						</div>
					</div>
					<div class="two_box">
						<div id="three" style='height: 300px'></div>

						<div class="sele">过去十二个月能耗：
							<el-select v-model="value2" style="width: 80px" size="small">
								<el-option label="RMB" value="RMB/m²" />
								<el-option label="kWh" value="kWh" />
								<el-option label="kgCO²" value="kgCO²" />
								<el-option label="tce" value="tce" />
							</el-select>
						</div>

					</div>
				</el-card>
				<el-card style="margin-top: 16px;height: 340px">
					<div class="end">
						<div>未来能耗预测</div>
						<el-button @click="dialogFormVisible = true">预测结果</el-button>
					</div>
					<div class="end_two">
						<div>
							<div class="fon_css">
								<div>室外平均温度变动：</div>
								<div>
									<el-input v-model="val1" style="width: 80px" size="small">
									</el-input>
									<el-button :icon="Plus" @click="val1++" size="small"></el-button>
									<el-button :icon="Minus" @click="val1--" size="small"></el-button>
								</div>
							</div>
							<div class="fon_css">
								<div>夏季室内平均温度变动：</div>
								<div>
									<el-input v-model="val2" style="width: 80px" size="small">
									</el-input>
									<el-button :icon="Plus" @click="val2++" size="small"></el-button>
									<el-button :icon="Minus" @click="val2--" size="small"></el-button>
								</div>
							</div>
						</div>

						<div>
							<div class="fon_css">
								<div>冬季室内平均温度变动：</div>
								<div>
									<el-input v-model="val3" style="width: 80px" size="small">
									</el-input>
									<el-button :icon="Plus" @click="val3++" size="small"></el-button>
									<el-button :icon="Minus" @click="val3--" size="small"></el-button>
								</div>
							</div>

							<div class="fon_css">
								<div>入住率变动：</div>
								<div>
									<el-input v-model="val4" style="width: 80px" size="small">
									</el-input>
									<el-button :icon="Plus" @click="val4++" size="small"></el-button>
									<el-button :icon="Minus" @click="val4--" size="small"></el-button>
								</div>
							</div>
						</div>
					</div>
				</el-card>
			</div>
			<div class="two">
				<el-card>
					<div class="title">高效日对比</div>
					<div class="qwe">
						<div id="one" style='height: 350px'></div>
						<div class="rq">
							<el-date-picker v-model="time" type="date" placeholder="请选择日期" />
						</div>
					</div>
					<div class="t_two">
						<div id="two" style="height: 330px"></div>
						<div class="rqs">
							<el-date-picker v-model="time1" type="date" placeholder="请选择日期" />
						</div>
						<div class="aa">
							<p style="color: #8f9898;font-size: 15px">达标日比例</p>
							<p><span style="color: #6b9edc;font-size: 20px">68.3</span>%</p>
						</div>
					</div>
				</el-card>

			</div>
		</div>
		<!--弹出对话框-->
		<div>
			<el-dialog v-model="dialogFormVisible" width="30%" @open="opened" style="border-radius: 15px">
				<template #title>
					<span class="dia_font">预测结果</span>
				</template>
				<div ref="four" style='height: 300px'></div>
			</el-dialog>
		</div>
	</div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, nextTick, reactive } from 'vue';
import { Plus, Minus } from '@element-plus/icons-vue'
import { ProjectGroupone } from '@/api/model/echarts'

const time = ref('')
const time1 = ref('')
const value = ref('节费')
const value1 = ref('节电')
const value2 = ref('RMB')
const val1 = ref(0)
const val2 = ref(0)
const val3 = ref(0)
const val4 = ref(0)
const dialogFormVisible = ref(false)
const four = ref(null)
let state = reactive({
	one: {
		indicatorName: "高效日对比",
		firstType: "节电分析",
		secondType: "",
		type: "year",
		thirdType: "",
		dataType: "year",
		dayFrom: "1900-01-01",
		dayTo: "2023-01-02"

	},
	two: {
		indicatorName: "高效日达标分析",
		firstType: "节电分析",
		secondType: "",
		type: "year",
		thirdType: "",
		dataType: "year",
		dayFrom: "1900-01-01",
		dayTo: "2023-01-02"

	},
	three: {
		indicatorName: "过去十二个月能耗",
		firstType: "节电分析",
		secondType: "",
		type: "year",
		thirdType: "",
		dataType: "year",
		dayFrom: "1900-01-01",
		dayTo: "2023-01-02",
		projectId: '1'

	},

})
onMounted(() => {
	one()
	two()
	three()
	// 获取DOM元素并且进行初始化

})
const opened = () => {
	nextTick(() => {
		let myChart4 = echarts.init(four.value);
		myChart4.setOption(
			{
				tooltip: {
					trigger: 'axis',
				},
				grid: {
					left: '5%',
					right: '5%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [
					{
						name: "年",
						data: ['2019', '2020', '2021', '检测年'],
					}
				],
				yAxis: [
					{
						type: 'value',
						name: "能耗（kWh）",
						axisLine: {
							// x轴线隐藏，但不隐藏背景线
							show: true,
						},
					}
				],
				series: [
					{
						type: 'bar',
						barWidth: '60%',
						data: [20000, 14000, 22000, 18000]
					}
				]
			}
		);
	})
}
async function one() {

	let res = await ProjectGroupone(state.one)
	console.log(res, '高校日对比');
 var byear = []
      var num = []
      var num2 = []

      res.data.commonDailyDataList.forEach((item) => {
		console.log();
        byear.push(`${item.day.substring(5,10)}`)
	
        if (item.type == 'type1') {
          num.push(item.number1)
        }
        if (item.type == 'type2') {
          num2.push(item.number1)
        }
    
      })

      let list = [...new Set(byear)]
	  console.log(list,'shijian');

	let myChart = echarts.init(document.getElementById('one'));
	myChart.setOption(
		{
			title: {
				text: '高效日对比',
				textStyle: {
					color: '#8f9898',
				},
				left: 0,
				top: 20,
			},
			xAxis: {
				name: '月',
				data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
			},
			yAxis: {
				name: 'KMB/m²',
				type: 'value',
				axisLine: {
					// x轴线隐藏，但不隐藏背景线
					show: true,
				},
			},
			grid: {
				left: '3%',
				right: '7%',
				bottom: '10%',
				top: '25%',
				containLabel: true
			},
			legend: {
				right: 300,
				top: 20,
				itemWidth: 20,
				itemHeight: 1,
			},
			tooltip: {
				trigger: 'axis',
			},
			series: [
				{
					data: num,
					type: 'line',
					name: '高效日',
					smooth: true,
					areaStyle: {
						color: '#e7f4db',
					},
					color: '#92d050'
				},
				{
					data:num2,
					type: 'line',
					name: '选择日',
					smooth: true,
					areaStyle: {
						color: '#fdf2ce',
						opacity: 0.5
					},
					color: '#fed34f'
				}
			]
		}
	);
}

async function two() {

let res = await ProjectGroupone(state.two)
	console.log(res, '高效对比达标1111111');
	 var byear = []
      var num = []
      var num2 = []
      var num3 = []
      res.data.commonDailyDataList.forEach((item) => {
		console.log();
        byear.push(`${item.day.substring(0, 7)}`)
	
        if (item.type == 'type1') {
          num.push(item.number1)
        }
        if (item.type == 'type2') {
          num2.push(item.number1)
        }
        if (item.type == 'type3') {
          num3.push(item.number1)
        }

      })

      let list = [...new Set(byear)]
	  console.log(list,'shijian');
	let myChart2 = echarts.init(document.getElementById('two'));

	let arr = [0, 1, 0, 1, 0, 1, 0, 1, 0, 1]; //修改数组中的值来判断柱子的颜色

	// 创建图标

	myChart2.setOption(
		{
			title: {
				text: '高效日达标分析',
				left: 25,
				textStyle: { color: '#8f9898' },
			},
			legend: [
				{
					right: 330,
					top: 5,
					itemWidth: 15,
					data: ['达标', '不达标']
				},
				{
					right: 450,
					top: 7,
					itemWidth: 15,
					itemHeight: 1,
					data: ['高效日']
				},

			],
			grid: {
				left: '15%',
				right: '7%',
				bottom: '3%',
				top: '22%',
				containLabel: true
			},
			xAxis: [
				{
					name: '年',
					data: ['4/20', '4/21', '4/22', '4/23', '4/24', '4/25', '4/26', '4/27', '4/28'],
				},
			],
			yAxis: [
				{
					name: 'RMB/m²',
					type: 'value',
					axisLine: {
						// x轴线隐藏，但不隐藏背景线
						show: true,
					},
				}
			],
			tooltip: {
				trigger: 'axis',
			},
			series: [
				{
					type: 'bar',
					barWidth: '60%',
					name: '达标',
					data: num,
					itemStyle: {
						normal: {
							color: function (params) {
								if (arr[params.dataIndex] === 1) {
									return '#d6ebfa';
								} else if (arr[params.dataIndex] === 0) {
									return '#0070c0';
								}
								console.log(params)
							},
						}
					},
				},
				{
					type: 'bar',
					name: '不达标',
					data: num2,
					color: '#d6ebfa'
				},
				{
					type: 'line',
					name: '高效日',
					symbol: 'none',
					data: num3,
					color: '#0db459'
				},

			]
		}
	);


}
async function three() {

	let res = await ProjectGroupone(state.three)
	console.log(res.data, 'three');
	 var byear = []
      var num = []
      var num2 = []
      var num3 = []
      res.data.commonDailyDataList.forEach((item) => {
		console.log();
        byear.push(`${item.day.substring(0, 7)}`)
	
        if (item.type == 'type1') {
          num.push(item.number1)
        }
        if (item.type == 'type2') {
          num2.push(item.number1)
        }
        if (item.type == 'type3') {
          num3.push(item.number1)
        }

      })

      let list = [...new Set(byear)]
	  console.log(list,'shijian');

	let myChart3 = echarts.init(document.getElementById('three'));
	myChart3.setOption(
		{
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				top: 10,
				right: 30,
				itemWidth: 20,
				itemHeight: 1,
			},
			grid: {
				left: '3%',
				right: '5%',
				bottom: '5%',
				top: '25%',
				containLabel: true
			},
			xAxis: {
				data:list,
				name: '月',
			},
			yAxis: {
				type: 'value',
				name: 'RMB/m²',
			},
			series: [
				{
					name: '往年同期',
					type: 'line',
					stack: 'Total',
					data: num,
					color: '#d90909'
				},
				{
					name: '实际能耗',
					type: 'line',
					stack: 'Total',
					data: num2,
					color: '#ffc40f'
				},
				{
					name: '能耗预算',
					type: 'line',
					stack: 'Total',
					data:num3,
					color: '#dddddd'
				}
			]
		}
	);
}

</script>

<style scoped lang="scss">
:deep(.el-card__body) {
	padding: 0;
}

.box {
	display: flex;

	.one {
		flex: 1;
		margin-right: 8px;

		.one_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 15px;
			color: #7E7E7E;
			padding: 20px 0;
			border-bottom: 3px solid #DBE0ED;

			.qm {
				width: 100%;
				display: flex;
				align-items: end;
				justify-content: space-around;

				.num {
					color: #277BCB;
					font-size: 20px;
				}
			}

			.wn {
				width: 100%;
				display: flex;
				align-items: end;
				justify-content: space-around;

				.num {
					font-size: 20px;
					color: #277BCB;
				}
			}
		}

		.two_box {
			margin-top: 18px;
			position: relative;

			.sele {
				font-size: 15px;
				position: absolute;
				top: 1px;
				left: 30px;
			}

		}

		.end {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15px 20px;
			font-size: 20px;
			color: #6d83b7;
			font-weight: 600;
			border-bottom: 3px solid #f3f5f9;

			.el-button {
				color: white;
				background-color: #8faadc;
			}
		}

		.end_two {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 15px;
			color: #7E7E7E;
			margin-top: 25px;

			.fon_css {
				display: flex;
				justify-content: space-between;
				padding: 20px 0;
			}

			:deep(.el-button+.el-button) {
				margin: 0;
			}


		}
	}

	.two {
		flex: 1;
		margin-left: 8px;

		.title {
			padding: 15px 20px;
			font-size: 20px;
			color: #6d83b7;
			font-weight: 600;
			border-bottom: 3px solid #f3f5f9;
		}

		.qwe {
			position: relative;
			border-bottom: 3px solid #f3f5f9;
			margin: 0 20px 20px 20px;
			box-sizing: border-box;

			.rq {
				position: absolute;
				top: 15px;
				right: 20px;
			}
		}

		.t_two {
			position: relative;

			.rqs {
				position: absolute;
				top: 1px;
				right: 20px;
			}

			.aa {
				position: absolute;
				top: 40px;
				left: 30px;
			}
		}
	}
}

.dia_font {
	color: #4d62a5;
	font-size: 24px;
}

:deep(.el-dialog) {
	border-radius: 5px;
}

:deep(.el-dialog__header) {
	border-bottom: 3px solid #f1f3f7;
}

:deep(.el-dialog__close) {
	font-size: 24px;
	color: #4d62a5;
}
</style>
